<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>记忆翻牌游戏</title>
  <style>
    #game-board {
  display: grid;
  grid-template-columns: repeat(4, 100px);
  grid-template-rows: repeat(4, 100px);
  gap: 10px;
  margin: 20px auto;
  width: 420px;
}

.card {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 36px;
  background-color: lightblue;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.card.flipped {
  transform: rotateY(180deg);
}

.card.matched {
  background-color: green;
  pointer-events: none;
}
  </style>
</head>

<body>
  <h1>记忆翻牌游戏</h1>
  <div id="game-board"></div>
  <p id="step-counter">步数: 0</p>
  <script>
    // 游戏棋盘的行数和列数
const ROWS = 4;
const COLS = 4;

// 创建游戏棋盘对应的二维数组，初始值为null
let gameBoard = new Array(ROWS).fill(null).map(() => new Array(COLS).fill(null));

// 存储所有卡片图案的数组
const cardSymbols = ['🍎', '🍌', '🍇', '🍓', '🥝', '🍍', '🍒', '🍈'];
const symbols = [...cardSymbols,...cardSymbols];

// 用于存储已翻开卡片的数组
let flippedCards = [];

// 游戏步数计数器
let stepCount = 0;

// 初始化游戏棋盘，随机放置卡片图案
function initGameBoard() {
  // 洗牌，确保卡片图案随机分布
  shuffleArray(symbols);
  for (let row = 0; row < ROWS; row++) {
    for (let col = 0; col < COLS; col++) {
      const index = row * COLS + col;
      gameBoard[row][col] = { symbol: symbols[index], flipped: false, matched: false };
    }
  }
  renderBoard();
}

// 渲染游戏棋盘到HTML页面
function renderBoard() {
  const gameBoardDiv = document.getElementById('game-board');
  gameBoardDiv.innerHTML = '';
  for (let row = 0; row < ROWS; row++) {
    for (let col = 0; col < COLS; col++) {
      const card = document.createElement('div');
      card.classList.add('card');
      card.dataset.row = row;
      card.dataset.col = col;
      if (gameBoard[row][col].flipped) {
        card.textContent = gameBoard[row][col].symbol;
        card.classList.add('flipped');
      }
      if (gameBoard[row][col].matched) {
        card.classList.add('matched');
      }
      card.addEventListener('click', handleCardClick);
      gameBoardDiv.appendChild(card);
    }
  }
  updateStepCounter();
}

// 处理卡片点击事件的函数
function handleCardClick(event) {
  const row = parseInt(event.target.dataset.row);
  const col = parseInt(event.target.dataset.col);
  const card = gameBoard[row][col];
  if (!card.flipped && flippedCards.length < 2) {
    card.flipped = true;
    flippedCards.push(card);
    stepCount++;
    renderBoard();
    if (flippedCards.length === 2) {
      setTimeout(checkMatch, 1000);
    }
  }
}

// 检查两张翻开卡片是否匹配的函数
function checkMatch() {
  const [card1, card2] = flippedCards;
  if (card1.symbol === card2.symbol) {
    card1.matched = true;
    card2.matched = true;
  } else {
    card1.flipped = false;
    card2.flipped = false;
  }
  flippedCards = [];
  renderBoard();
  if (isGameOver()) {
    alert(`游戏结束！你一共用了 ${stepCount} 步。`);
  }
}

// 判断游戏是否结束（所有卡片都已匹配）
function isGameOver() {
  return gameBoard.every(row => row.every(card => card.matched));
}

// 更新步数显示
function updateStepCounter() {
  const stepCounter = document.getElementById('step-counter');
  stepCounter.textContent = `步数: ${stepCount}`;
}

// 简单的数组洗牌函数
function shuffleArray(array) {
  for (let i = array.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [array[i], array[j]] = [array[j], array[i]];
  }
  return array;
}

// 页面加载完成后初始化游戏
window.onload = initGameBoard;
  </script>
</body>

</html>